<template>
  <div>
    <div class="row">
      <div class="col-lg-3"><h3 class="text-primary">京东产品评价词云</h3></div>
      <div class="col-lg-2"><h5 class="text-success">选择品类:</h5></div>
      <div class="col-lg-2">
        <form>
          <div class="mb-3">
            <select
              class="form-select"
              aria-label="Default select example"
              v-model="getProducts"
              v-on:change="getData()"
            >
              <option v-for="p in products" :key="p" :value="p">
                {{ p }}
              </option>
            </select>
          </div>
        </form>
      </div>
    </div>
    <div
      id="mywordcloud"
      style="width: 600px; height: 400px"
      class="align-center"
    ></div>
    <div
      id="fwBar"
      style="width: 600px; height: 800px"
      class="align-center"
    ></div>
  </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  data() {
    return {
      chart: "",
      chartFw: "",
      getProducts: "花生",
      products: ["稻谷", "花生", "玉米", "棉花"],
      worddata: [],
      image:
        "",
    };
  },
  methods: {
    getData() {
      this.worddata = [];
      this.axios
        .get(
          "http://122.51.157.58:8081/api-service/getJingDongFrequency?key=123456&variety=" +
            this.getProducts
        )
        .then((body) => {
          var result = body.data;

          for (var i = 0; i < result.data.result.length; i++) {
            this.worddata.push({
              name: result.data.result[i].wordFenci,
              value: result.data.result[i].frequencyWord,
            });
          }
          this.initChart();
        });
    },
    initChart() {
      var maskImage = new Image();
      maskImage.src = this.image;

      this.chart = this.echarts.init(document.getElementById("mywordcloud"));
      this.chartFw = this.echarts.init(document.getElementById("fwBar"));
      const option = {
        backgroundColor: "#fff",
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            sizeRange: [14, 60],
            rotationRange: [0, 0],
            maskImage: maskImage,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ")"
                  );
                },
              },
            },
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: this.worddata,
          },
        ],
      };
      const optionFw = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.worddata,
          },
        ],
      };

      this.chart.setOption(option);
      this.chartFw.setOption(optionFw);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.align-center {
  text-align: center;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
</style>





